<template>
  <d2-container class="wl" style="margin:20px 20px !important;">
    <div class="b-box-26">
      <div class="tit">
        <span>
        消息列表
        </span>
        <p></p>
      </div>

      <div class="boxnav">
        <div class="search">
          <div class="search-date">
            <el-date-picker
              v-model="messageListDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>

          <div class="search-type">
            <el-select v-model="messageTypeValue" :multiple="false" placeholder="请选择">
              <el-option
                v-for="item in messageType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="search-btn">
            <el-button type="primary" icon="el-icon-search" @click="search_message">搜索</el-button>
          </div>
        </div>
        <div class="logistics-list-table">
          <div class="logistics-list-table-header">
            <div class="logistics-list-table-th" style="width:8%">运单号</div>
            <div class="logistics-list-table-th" style="width:8%">客户运单号</div>
            <div class="logistics-list-table-th" style="width:12%">发货单位</div>
            <div class="logistics-list-table-th" style="width:12%">收货单位</div>
            <div class="logistics-list-table-th" style="width:7%">启运时间</div>
            <div class="logistics-list-table-th" style="width:7%">签收时间</div>
            <div class="logistics-list-table-th" style="width:4%">温区上限</div>
            <div class="logistics-list-table-th" style="width:4%">温区下限</div>
            <div class="logistics-list-table-th" style="width:4%">最低温度</div>
            <div class="logistics-list-table-th" style="width:4%">最高温度</div>
            <div class="logistics-list-table-th" style="width:6%">类型</div>
            <div class="logistics-list-table-th" style="width:14%">备注</div>
            <div class="logistics-list-table-th" style="width:10%">操作</div>
          </div>
          <div class="table-row" style="  height: 567px;">
            <div class="logistics-list-table-body" v-for="(item, index) in messageList" :key="item.id">
            <div class="logistics-list-table-td" style="width:8%">{{item.ydh}}</div>
            <div class="logistics-list-table-td" style="width:8%">{{item.third_ydh}}</div>
            <div class="logistics-list-table-td" style="width:12%">{{item.fhdw}}</div>
            <div class="logistics-list-table-td" style="width:12%">{{item.shdw}}</div>
            <div class="logistics-list-table-td" style="width:7%">{{item.start_time}}</div>
            <div class="logistics-list-table-td" style="width:7%">{{item.sign_time}}</div>
            <div class="logistics-list-table-td" style="width:4%">{{item.temp_limit_max}}</div>
            <div class="logistics-list-table-td" style="width:4%">{{item.temp_limit_min}}</div>
            <div class="logistics-list-table-td" style="width:4%">{{item.temp_max}}</div>
            <div class="logistics-list-table-td" style="width:4%">{{item.temp_min}}</div>
            <div class="logistics-list-table-td" style="width:6%">
              <div v-if="item.type == 1" style="color: rgb(255, 127, 0);">催办</div>
              <div v-if="item.type == 2" style="color: rgb(255, 0, 0);">审核不通过</div>
            </div>
            <div class="logistics-list-table-td" style="width:14%">{{item.remark}}</div>
            <div class="logistics-list-table-td" style="width:10%">
            <div v-if="item.status == 1">
              <el-button type="primary" @click="message_action(item,index)">处理</el-button>
            </div>
            
            </div>
              <!-- <div class="logistics-list-table-td" style="width:18%">
                <div v-if="item.wlstatsimp == '已签收'" style="color: rgb(35, 142, 35);">{{item.ydh}}</div>
                <div v-if="item.wlstatsimp == '待签收'" style="color:rgb(255, 127, 0);">{{item.ydh}}</div>
                <div v-if="item.wlstatsimp == '待配送'" style="color:rgb(216, 216, 191);">{{item.ydh}}</div>
                <div v-if="item.wlstatsimp == '运输中'" style="color:rgb(112, 147, 219)">{{item.ydh}}</div>
              </div> -->
                <!-- <div class="logistics-list-table-td" style="width:18%">{{item.cuswbno}}</div>
                <div class="logistics-list-table-td" style="width:43%;cursor:pointer" @click="click_info(item)">{{item.mddpro}}-{{item.mddcit}}/{{item.wlpos}}</div>
                <div class="logistics-list-table-td" style="width:15%">{{item.sswdtxt}}</div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="pagination-center">
          <el-pagination  @current-change="handleCurrentChange" :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>

    </div>


  </d2-container>
</template>

<script>
import draggable from 'vuedraggable'
import VueGridLayout from 'vue-grid-layout'
import newPolyline from '@/components/new-polyline/newPolyline'
import { Loading } from 'element-ui';

import { request } from '@/api/service'

export default {
  name: 'indexComponent',
  components: {
    draggable,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    newPolyline,
    Loading
  },
  data () {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 6); // 设置为最近7天
    return {
      messageListDate: [this.formatDate(startDate), this.formatDate(endDate)],
      messageList: [],
      messageType: [
        {
          value: 0,
          label: '全部'
        },
         {
          value: 1,
          label: '催办'
        }, 
        {
          value: 2,
          label: '审核'
        }, 
      ],
      messageTypeValue: 0,
      currentPage: 1,
      pageSize: 15,
      total: 0
    }
  },
  async created () {
    this.layout = await this.$store.dispatch('d2admin/db/get', {
      dbName: 'sys',
      path: 'grid-layout',
      defaultValue: JSON.parse(JSON.stringify(this.defaultLayout)),
      user: true
    }, { root: true })
  },
  mounted () {
    // this.$emit('on-mounted')
    this.search_message()
  },
  computed: {
  },
  watch: {
    
  },
  methods: {
    // 时间格式化
    formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        var h = date.getHours();
        if (mymonth < 10) {
          mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
          myweekday = "0" + myweekday;
        }
        // h = h < 10 ? "0" + h : h;
        // var m = date.getMinutes();
        // m = m < 10 ? "0" + m : m;
        // var s = date.getSeconds();
        // s = s < 10 ? "0" + s : s;
        return (
          myyear + "-" + mymonth + "-" + myweekday
        );
    },

  

    search_message() {
      var url = '/api/messagelist/'
      var that = this
      request({ url: url ,params: { start_time: this.messageListDate[0], end_time: this.messageListDate[1],type: this.messageTypeValue}}).then(ret => {
        that.messageList = ret.data["data"]
        that.total = ret.data.count
      })
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
      var url = '/api/messagelist/'
      var that = this
      request({ url: url ,params: { start_time: this.messageListDate[0], end_time: this.messageListDate[1],type: this.messageTypeValue,page: this.currentPage}}).then(ret => {
        that.messageList = ret.data["data"]
        that.total = ret.data.count
      })
    },

    message_action(item,index) {
      var that = this
      

      that.loading = true
      return request({
        url: '/api/messageaction/',
        method: 'post',
        data: {
          id: item.id
        }
      }).then(response => {
        if(response.code == 2000){
          that.loading = false
          that.messageList[index].status = 2
          that.$message.success('处理成功')
        }else{
          that.$message.info(response.msg)
        }
        
      }).finally(() => {
        that.loading = false
      })
    }

    



  },
  beforeDestroy() {
    // 清除定时任务
    // clearInterval(this.intervalId);
  }
}
</script>

<style lang="scss">
@font-face{font-family:electronicFont;src:url('~@/assets/fonts/DS-DIGIT.TTF')}


img {
    max-width: none !important;
}

.el-dialog__header{
  background: #333366;
}
.warm_style .el-dialog__header{
 background: red;
}
.warm_style .el-dialog__headerbtn .el-dialog__close{
color: #fff
}
.el-dialog__title{
  color: #fff
}

.el-dialog__body {
  border-bottom:1px solid #333366
}
.dialog-footer .el-button--success{
  background-color: #333399;
  border-color: #333399;
}

.dialog-footer .el-button--success:hover{
  background-color: #333366;
  border-color: #333366;
}

.wl .el-range-editor .el-range-input {
 background: transparent;
 font-size: 12px;
 line-height: 24px;
 color: rgba(255, 255, 255, .8)
}

.wl .el-date-editor .el-range__icon {
  line-height: 24px !important;
}

.wl .el-date-editor .el-range-separator {
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  line-height: 24px;
  width: 20px
}

.wl .el-popper[x-placement^=bottom] { 
  background: rgb(5, 18, 81);
  color: rgba(255, 255, 255, .8);
}

.el-date-table th {
  color: rgba(255, 255, 255, .8);
}

.wl .el-input__inner {
  height: 24px;
  line-height: 24px;
  color: rgba(255, 255, 255, .8);
  background: transparent;
  border: 0;
  padding: 0 8px;
}

.wl .el-input__icon {
  font-size: 12px;
  line-height: 24px;
  width: 20px
}

.wl .el-input--default {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}

.wl .el-select .el-input .el-select__caret {
  height: 24px;
  line-height: 24px;
}

.wl .el-select-dropdown__item.selected {
  background: #333366;
  color: rgba(255, 255, 255, .8)
}

.wl .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: #333366;
}

.wl .el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8)
}

.wl .el-input--suffix .el-input__inner {
  padding-right: 20px;
}

.wl .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
  background: #333366;
  color: rgba(255, 255, 255, .8)
}

.wl .el-date-editor .el-range__close-icon {
  width: 1px;
}



.el-pagination {
  color: #efefef
}
.el-pagination__total{
  color: #efefef;
}
.el-pagination button:disabled{
  background: transparent
}

.el-pagination .btn-next, .el-pagination .btn-prev {
  background: transparent
}
.el-pager li{
  background: transparent
}

.el-pagination .btn-next, .el-pagination .btn-prev {
  color: #efefef;
}
.el-pagination button:disabled {
  color: #efefef;
}

</style>



<style scoped lang="scss">
::v-deep .d2-container-full__body {
  padding: 0!important;
}


input {
  -webkit-appearance:auto !important
}

input[type="checkbox" i] {
  margin:0 !important
}

*::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    opacity: 0.5;
    background-color: transparent;
    color: transparent
}

.b-box-100{
  width:100%;
  padding:0 20px;
  float:left;
}
.tit{
  display:flex;
  align-items: flex-end;
}

.tit span {
    background: url("~@/assets/image/line1.png") no-repeat bottom right;
    font-size: 20px;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-right: 20px;
    color:#fff
}

.tit p {
    background: url("~@/assets/image/line2.png") no-repeat bottom right;
    width: 100%;
    height: 13px;
    margin-bottom: 5px;
    opacity: .5;
}

.boxnav {
  height: 100%;
  padding: 10px 5px;
  display: block;
  height: 664px;

}

.table-row {
  overflow: hidden;
  overflow-y: scroll;
  width: 100%
}

.boxnav .search{
  width: 100%;
  float: left
}

.boxnav .search-date {
  width: 300px;
  float: left;
}

.boxnav .search-type {
  width: 180px;
  float: left;
}

.el-date-editor--daterange.el-input__inner {
  width: auto;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0px;
  padding: 3px 5px;
}

.el-date-editor .el-range__close-icon {
  width: 10px;
}


.logistics-list-table{
  width: 100%
}

.logistics-list-table-header{
  width:100%;
  float: left;
  border-bottom: 1px solid #407abd;
}

.logistics-list-table-body {
  width: 100%;
  float: left;
  border-bottom: 1px dotted #407abd;
}

.logistics-list-table-th {
    font-size: 14px;
    padding: 10px 0;
    color: rgba(255, 255, 255, .8);
    float: left;
    text-align:center;
    line-height:35px;
    font-weight: bold;
}

.logistics-list-table-td{
  font-size: 14px;
  padding: 10px 0px;
  color: rgba(255, 255, 255, 1);
  text-align:center;
  align-items: center;
  float: left;
  word-break: break-all; 
  font-size: 12px
}

.search-btn {
  width: 14%;
  float: left;
}

.search-btn .el-button--primary {
  padding: 8px 5px;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  border: 0;
  font-size: 12px;
}

.search-btn .el-button--primary:focus,.search-btn .el-button--primary:hover {
  background: #333366;
  color: rgba(255, 255, 255, .8);
}

.logistics-list-table-td .el-button--primary {
  padding: 8px 5px;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  border: 0;
  font-size: 12px;
}

.logistics-list-table-td .el-button--primary:focus,.logistics-list-table-td .el-button--primary:hover {
  background: #66b1ff;
  color: rgba(255, 255, 255, .8);
}

.search-down {
  width: 14%;
  float: left
}

.b-box{
  padding:0 20px;
  float:left;
}

.bm-view {
  height: 700px;
}

.pagination-center {
  text-align:center
}


</style>
